import React, { useState, useEffect } from 'react'

interface BarrageSettings {
  fontSize: 12 | 18 | 24 | 30
  opacity: 25 | 50 | 75 | 100
  speed: 120 | 150 | 180 | 230
  avoidPerson: boolean
  displayArea: 'quarter' | 'half' | 'threequarter' | 'fullscreen'
  fontColor: 'single' | 'colorful' | 'custom'
  customColor?: string
  barrageEnabled: boolean
}

interface SimpleSettingsButtonProps {
  onSettingsChange?: (settings: BarrageSettings, changedKey?: string) => void
}

const SimpleSettingsButton: React.FC<SimpleSettingsButtonProps> = ({ onSettingsChange }) => {
  const [isOpen, setIsOpen] = useState(false)
  const [showNotification, setShowNotification] = useState(false)
  const [notificationText, setNotificationText] = useState('')
  const [settings, setSettings] = useState<BarrageSettings>({
    fontSize: 18,
    opacity: 100,
    speed: 120,
    avoidPerson: true,
    displayArea: 'fullscreen',
    fontColor: 'colorful',
    barrageEnabled: true
  })

  const showSettingNotification = (text: string) => {
    setNotificationText(text)
    setShowNotification(true)
    setTimeout(() => setShowNotification(false), 2000)
  }

  const updateSetting = <K extends keyof BarrageSettings>(key: K, value: BarrageSettings[K]) => {
    const newSettings = { ...settings, [key]: value }
    setSettings(newSettings)
    onSettingsChange?.(newSettings, key)
    
    // 保存到本地存储
    localStorage.setItem('barrage-settings', JSON.stringify(newSettings))
    
    // 显示设置变更通知
    const settingLabels: Record<string, string> = {
      fontSize: '字体大小',
      opacity: '透明度',
      speed: '移动速度',
      avoidPerson: '人物防遮盖',
      displayArea: '显示区域',
      fontColor: '字体颜色',
      customColor: '自定义颜色',
      barrageEnabled: '弹幕显示'
    }
    
    let displayValue: string
    if (key === 'opacity') {
      displayValue = `${value}%`
    } else if (key === 'speed') {
      displayValue = `${value}px/s`
    } else if (key === 'fontSize') {
      displayValue = `${value}px`
    } else if (key === 'avoidPerson' || key === 'barrageEnabled') {
      displayValue = value ? '已开启' : '已关闭'
    } else if (key === 'displayArea') {
      const areaLabels = {
        quarter: '1/4区域',
        half: '2/4区域',
        threequarter: '3/4区域',
        fullscreen: '全屏'
      }
      displayValue = areaLabels[value as keyof typeof areaLabels] || String(value)
    } else if (key === 'fontColor') {
      const colorLabels = {
        single: '单一颜色',
        colorful: '彩色',
        custom: '自定义'
      }
      displayValue = colorLabels[value as keyof typeof colorLabels] || String(value)
    } else {
      displayValue = String(value)
    }
    
    showSettingNotification(`${settingLabels[key]}: ${displayValue}`)
  }

  // 从本地存储加载设置
  useEffect(() => {
    try {
      const savedSettings = localStorage.getItem('barrage-settings')
      if (savedSettings) {
        const parsedSettings = JSON.parse(savedSettings)
         const loadedSettings = {
           fontSize: 18,
           opacity: 100,
           speed: 120,
           avoidPerson: false,
           displayArea: 'fullscreen',
           fontColor: 'colorful',
           barrageEnabled: true,
           ...parsedSettings 
         }
        setSettings(loadedSettings)
        // 延迟调用，避免在组件初始化时出错
        setTimeout(() => {
          onSettingsChange?.(loadedSettings, 'init')
        }, 100)
      }
    } catch (error) {
      console.warn('加载设置失败:', error)
    }
  }, [])

  return (
    <div>
      <button
        onClick={() => setIsOpen(!isOpen)}
        style={{
          background: isOpen ? '#ff1493' : '#ff69b4',
          color: 'white',
          border: 'none',
          borderRadius: '6px',
          padding: '8px 12px',
          cursor: 'pointer',
          fontSize: '14px',
          fontWeight: '500',
          transition: 'all 0.2s ease',
          transform: isOpen ? 'scale(1.05)' : 'scale(1)',
          boxShadow: '0 2px 8px rgba(255, 105, 180, 0.3)',
        }}
      >
        ⚙️ 设置
      </button>
      
      {isOpen && (
        <>
          {/* 遮罩层 */}
          <div
            style={{
              position: 'fixed',
              top: 0,
              left: 0,
              right: 0,
              bottom: 0,
              background: 'rgba(0,0,0,0.3)',
              zIndex: 999,
            }}
            onClick={() => setIsOpen(false)}
          />
          
          {/* 设置面板 */}
          <div
            style={{
              position: 'fixed',
              top: '50%',
              left: '50%',
              transform: 'translate(-50%, -50%)',
              background: '#2a2a2a',
              borderRadius: '12px',
              padding: '20px',
              boxShadow: '0 10px 30px rgba(0, 0, 0, 0.5)',
              zIndex: 1000,
              width: '400px',
              height: '400px',
              border: '1px solid #404040',
              overflow: 'hidden',
              display: 'flex',
              flexDirection: 'column',
            }}
          >
            {/* 头部 */}
            <div style={{
              textAlign: 'center',
              marginBottom: '20px',
              position: 'relative',
              flexShrink: 0,
            }}>
              <h3 style={{ 
                margin: 0, 
                fontSize: '18px', 
                fontWeight: '500',
                color: '#ffffff'
              }}>
                弹幕设置
              </h3>
              <button
                onClick={() => setIsOpen(false)}
                style={{
                  position: 'absolute',
                  top: '-2px',
                  right: '0',
                  background: 'none',
                  border: 'none',
                  fontSize: '16px',
                  cursor: 'pointer',
                  color: '#cccccc',
                  padding: '4px',
                  width: '20px',
                  height: '20px',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                }}
              >
                ✕
              </button>
            </div>
            
            {/* 设置内容 */}
            <div style={{ 
              flex: 1, 
              overflowY: 'auto', 
              paddingRight: '4px'
            }}>


              {/* 滑块设置区域 */}
              <div style={{ marginBottom: '16px' }}>
                {/* 显示区域滑块 */}
                <div style={{ marginBottom: '12px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
                    <span style={{ color: '#ffffff', fontSize: '13px' }}>显示区域</span>
                    <span style={{ color: '#ff69b4', fontSize: '13px', fontWeight: 'bold' }}>
                      {settings.displayArea === 'quarter' ? '1/4' : 
                       settings.displayArea === 'half' ? '2/4' : 
                       settings.displayArea === 'threequarter' ? '3/4' : '全屏'}
                    </span>
                  </div>
                  <div style={{ position: 'relative' }}>
                    <div style={{
                      width: '100%',
                      height: '4px',
                      background: '#404040',
                      borderRadius: '2px',
                      position: 'relative'
                    }}>
                      <div style={{
                        width: settings.displayArea === 'quarter' ? '0%' : 
                              settings.displayArea === 'half' ? '33.33%' : 
                              settings.displayArea === 'threequarter' ? '66.67%' : '100%',
                        height: '100%',
                        background: '#ff69b4',
                        borderRadius: '2px',
                      }} />
                    </div>
                    {/* 档位指示点 */}
                    {[0, 1, 2, 3].map((position) => (
                      <div
                        key={position}
                        style={{
                          position: 'absolute',
                          top: '0px',
                          left: `${(position / 3) * 100}%`,
                          width: '4px',
                          height: '4px',
                          background: '#ffffff',
                          borderRadius: '50%',
                          transform: 'translateX(-50%)',
                        }}
                      />
                    ))}
                    <input
                      type="range"
                      min="0"
                      max="3"
                      step="1"
                      value={settings.displayArea === 'quarter' ? 0 : 
                            settings.displayArea === 'half' ? 1 : 
                            settings.displayArea === 'threequarter' ? 2 : 3}
                      onChange={(e) => {
                        const value = parseInt(e.target.value);
                        const area = value === 0 ? 'quarter' : 
                                    value === 1 ? 'half' : 
                                    value === 2 ? 'threequarter' : 'fullscreen';
                        updateSetting('displayArea', area as any);
                      }}
                      style={{
                        position: 'absolute',
                        top: '-6px',
                        left: 0,
                        width: '100%',
                        height: '16px',
                        opacity: 0,
                        cursor: 'pointer',
                      }}
                    />
                  </div>
                </div>


                {/* 不透明度滑块 */}
                <div style={{ marginBottom: '12px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
                    <span style={{ color: '#ffffff', fontSize: '13px' }}>不透明度</span>
                    <span style={{ color: '#ff69b4', fontSize: '13px', fontWeight: 'bold' }}>{settings.opacity}%</span>
                  </div>
                  <div style={{ position: 'relative' }}>
                    <div style={{
                      width: '100%',
                      height: '4px',
                      background: '#404040',
                      borderRadius: '2px',
                      position: 'relative'
                    }}>
                      <div style={{
                        width: settings.opacity === 25 ? '0%' : 
                              settings.opacity === 50 ? '33.33%' : 
                              settings.opacity === 75 ? '66.67%' : '100%',
                        height: '100%',
                        background: '#ff69b4',
                        borderRadius: '2px',
                      }} />
                    </div>
                    {/* 档位指示点 */}
                    {[0, 1, 2, 3].map((position) => (
                      <div
                        key={position}
                        style={{
                          position: 'absolute',
                          top: '0px',
                          left: `${(position / 3) * 100}%`,
                          width: '4px',
                          height: '4px',
                          background: '#ffffff',
                          borderRadius: '50%',
                          transform: 'translateX(-50%)',
                        }}
                      />
                    ))}
                    <input
                      type="range"
                      min="0"
                      max="3"
                      step="1"
                      value={settings.opacity === 25 ? 0 : settings.opacity === 50 ? 1 : settings.opacity === 75 ? 2 : 3}
                      onChange={(e) => {
                        const value = parseInt(e.target.value);
                        const opacity = value === 0 ? 25 : value === 1 ? 50 : value === 2 ? 75 : 100;
                        updateSetting('opacity', opacity as any);
                      }}
                      style={{
                        position: 'absolute',
                        top: '-6px',
                        left: 0,
                        width: '100%',
                        height: '16px',
                        opacity: 0,
                        cursor: 'pointer',
                      }}
                    />
                  </div>
                </div>

                {/* 弹幕字号滑块 */}
                <div style={{ marginBottom: '12px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
                    <span style={{ color: '#ffffff', fontSize: '13px' }}>弹幕字号</span>
                    <span style={{ color: '#ff69b4', fontSize: '13px', fontWeight: 'bold' }}>
                      {settings.fontSize === 12 ? '小' : 
                       settings.fontSize === 18 ? '一般' : 
                       settings.fontSize === 24 ? '大' : '特大'}
                    </span>
                  </div>
                  <div style={{ position: 'relative' }}>
                    <div style={{
                      width: '100%',
                      height: '4px',
                      background: '#404040',
                      borderRadius: '2px',
                      position: 'relative'
                    }}>
                      <div style={{
                        width: settings.fontSize === 12 ? '0%' : 
                              settings.fontSize === 18 ? '33.33%' : 
                              settings.fontSize === 24 ? '66.67%' : '100%',
                        height: '100%',
                        background: '#ff69b4',
                        borderRadius: '2px',
                      }} />
                    </div>
                    {/* 档位指示点 */}
                    {[0, 1, 2, 3].map((position) => (
                      <div
                        key={position}
                        style={{
                          position: 'absolute',
                          top: '0px',
                          left: `${(position / 3) * 100}%`,
                          width: '4px',
                          height: '4px',
                          background: '#ffffff',
                          borderRadius: '50%',
                          transform: 'translateX(-50%)',
                        }}
                      />
                    ))}
                    <input
                      type="range"
                      min="0"
                      max="3"
                      step="1"
                      value={settings.fontSize === 12 ? 0 : settings.fontSize === 18 ? 1 : settings.fontSize === 24 ? 2 : 3}
                      onChange={(e) => {
                        const value = parseInt(e.target.value);
                        const fontSize = value === 0 ? 12 : value === 1 ? 18 : value === 2 ? 24 : 30;
                        updateSetting('fontSize', fontSize as any);
                      }}
                      style={{
                        position: 'absolute',
                        top: '-6px',
                        left: 0,
                        width: '100%',
                        height: '16px',
                        opacity: 0,
                        cursor: 'pointer',
                      }}
                    />
                  </div>
                </div>

                {/* 弹幕速度滑块 */}
                <div style={{ marginBottom: '12px' }}>
                  <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: '6px' }}>
                    <span style={{ color: '#ffffff', fontSize: '13px' }}>弹幕速度</span>
                    <span style={{ color: '#ff69b4', fontSize: '13px', fontWeight: 'bold' }}>
                      {settings.speed === 120 ? '慢' : settings.speed === 150 ? '中' : settings.speed === 180 ? '快' : '极快'}
                    </span>
                  </div>
                  <div style={{ position: 'relative' }}>
                    <div style={{
                      width: '100%',
                      height: '4px',
                      background: '#404040',
                      borderRadius: '2px',
                      position: 'relative'
                    }}>
                      <div style={{
                        width: settings.speed === 120 ? '0%' : 
                              settings.speed === 150 ? '33.33%' : 
                              settings.speed === 180 ? '66.67%' : '100%',
                        height: '100%',
                        background: '#ff69b4',
                        borderRadius: '2px',
                      }} />
                    </div>
                    {/* 速度档位点 */}
                    {[0, 1, 2, 3].map((position) => (
                      <div
                        key={position}
                        style={{
                          position: 'absolute',
                          top: '0px',
                          left: `${(position / 3) * 100}%`,
                          width: '4px',
                          height: '4px',
                          background: '#ffffff',
                          borderRadius: '50%',
                          transform: 'translateX(-50%)',
                        }}
                      />
                    ))}
                    <input
                      type="range"
                      min="0"
                      max="3"
                      step="1"
                      value={settings.speed === 120 ? 0 : settings.speed === 150 ? 1 : settings.speed === 180 ? 2 : 3}
                      onChange={(e) => {
                        const value = parseInt(e.target.value);
                        const speed = value === 0 ? 120 : value === 1 ? 150 : value === 2 ? 180 : 230;
                        updateSetting('speed', speed as any);
                      }}
                      style={{
                        position: 'absolute',
                        top: '-6px',
                        left: 0,
                        width: '100%',
                        height: '16px',
                        opacity: 0,
                        cursor: 'pointer',
                      }}
                    />
                  </div>
                </div>

                 {/* 弹幕控制开关 */}
                 <div style={{ marginBottom: '12px' }}>
                   <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     <span style={{ color: '#ffffff', fontSize: '13px' }}>弹幕显示</span>
                     <div
                       onClick={() => updateSetting('barrageEnabled', !settings.barrageEnabled)}
                       style={{
                         width: '48px',
                         height: '24px',
                         borderRadius: '12px',
                         background: settings.barrageEnabled ? '#ff69b4' : '#404040',
                         position: 'relative',
                         cursor: 'pointer',
                         transition: 'all 0.3s ease',
                       }}
                     >
                       <div
                         style={{
                           width: '20px',
                           height: '20px',
                           borderRadius: '50%',
                           background: 'white',
                           position: 'absolute',
                           top: '2px',
                           left: settings.barrageEnabled ? '26px' : '2px',
                           transition: 'all 0.3s ease',
                           boxShadow: '0 1px 3px rgba(0,0,0,0.2)'
                         }}
                       />
                     </div>
                   </div>
                 </div>

                 {/* 智能防挡弹幕开关 */}
                 <div style={{ marginBottom: '12px' }}>
                   <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
                     <span style={{ color: '#ffffff', fontSize: '13px' }}>智能防挡弹幕</span>
                    <div
                      onClick={() => updateSetting('avoidPerson', !settings.avoidPerson)}
                      style={{
                        width: '48px',
                        height: '24px',
                        borderRadius: '12px',
                        background: settings.avoidPerson ? '#ff69b4' : '#404040',
                        position: 'relative',
                        cursor: 'pointer',
                        transition: 'all 0.3s ease',
                      }}
                    >
                      <div
                        style={{
                          width: '20px',
                          height: '20px',
                          borderRadius: '50%',
                          background: 'white',
                          position: 'absolute',
                          top: '2px',
                          left: settings.avoidPerson ? '26px' : '2px',
                          transition: 'all 0.3s ease',
                          boxShadow: '0 1px 3px rgba(0,0,0,0.2)'
                        }}
                      />
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            {/* 底部按钮 */}
            <div style={{
              padding: '12px 0',
              borderTop: '1px solid #404040',
              display: 'flex',
              justifyContent: 'flex-end',
              gap: '8px',
              flexShrink: 0,
            }}>
              <button
                 onClick={() => {
                   const defaultSettings: BarrageSettings = {
                     fontSize: 18,
                     opacity: 100,
                     speed: 120,
                     avoidPerson: true,
                     displayArea: 'fullscreen',
                     fontColor: 'colorful',
                     barrageEnabled: true
                   }
                  setSettings(defaultSettings)
                  onSettingsChange?.(defaultSettings, 'reset')
                  localStorage.setItem('barrage-settings', JSON.stringify(defaultSettings))
                }}
                style={{
                  background: 'none',
                  border: '1px solid #666666',
                  borderRadius: '4px',
                  padding: '6px 12px',
                  cursor: 'pointer',
                  fontSize: '12px',
                  color: '#cccccc',
                  transition: 'all 0.2s ease',
                }}
              >
                重置
              </button>
              
              <button
                onClick={() => setIsOpen(false)}
                style={{
                  background: '#ff69b4',
                  border: 'none',
                  borderRadius: '4px',
                  padding: '6px 12px',
                  cursor: 'pointer',
                  fontSize: '12px',
                  fontWeight: '500',
                  color: 'white',
                  transition: 'all 0.2s ease',
                }}
              >
                应用
              </button>
            </div>
          </div>
        </>
      )}
      
      {/* 设置变更通知 */}
      {showNotification && (
        <div
          style={{
            position: 'fixed',
            top: '20px',
            right: '20px',
            background: '#28a745',
            color: 'white',
            padding: '12px 20px',
            borderRadius: '8px',
            boxShadow: '0 4px 12px rgba(0,0,0,0.15)',
            zIndex: 1001,
            fontSize: '14px',
            fontWeight: '500',
            animation: 'slideInRight 0.3s ease-out',
          }}
        >
          ✅ {notificationText}
        </div>
      )}
      
      {/* 添加动画样式 */}
      <style>{`
        @keyframes slideInRight {
          from {
            transform: translateX(100%);
            opacity: 0;
          }
          to {
            transform: translateX(0);
            opacity: 1;
          }
        }
      `}</style>
    </div>
  )
}

export { SimpleSettingsButton }
export default SimpleSettingsButton